Introduction

In this exercise, you will cover the steps of taking the wireframe created in a previous exercise to a high-fidelity mock-up. On completion, you will have all the skills to take the wireframes of your design solution for your Little Lemon project to produce high-fidelity mock-ups.

Converting your wireframes into high-fidelity mock-ups requires you to apply design fundamentals using the brand style guide. The brand style guide specifies every aspect of the look and feel of the brand. This includes typefaces, colors, and how images should be used. It also includes a UI kit, which is a set of files containing critical UI components such as font sizes, icons, and documentation.

The images used in the example mock-up can be found here:

To complete this exercise per the style guide, you'll need to install the typefaces found in the following folder:

You may wish to revisit these lessons before you begin or refer to them as you go along.

Scenario

The owners of the Little Lemon restaurant have approved the wireframes for their app and want you to turn these wireframes into a high-fidelity design. This means you’ve been tasked with creating something that resembles the intended final product much more closely, by using the true styling, colors and fonts of the Little Lemon brand.

Instructions

Step 1: Brand Style guide

First, let’s examine the Little Lemon style guide. Notice that it includes several variants for the logo, a list of typefaces and how to use them, a palette of primary and secondary colors, and guidelines for using photographs. You can also download the document in PDF format from the following link:

Step 2: Open the wireframe

Import the .fig file linked below into Figma. It contains the wireframe you'll use as the base for this exercise:

The file contains the following image:

If you are unsure of how to import this file, revisit the reading How to save and import Figma files in Module 1, Lesson 1 of the course Principles of UX UI Design .

Step 3: Create a color style

Next, let's create the styles as per the brand style guide. Styles help you simplify your workflow, keep text and colors consistent, and save you valuable time.

To create a color style, complete the following steps by using the Little Lemon brand colors:

Step 4: Create a text style

To create text styles, refer to the Little Lemon brand text styles and complete the steps that follow.

Begin by creating a new text layer and adding some settings. For example:

Once you’ve set those parameters, complete the following steps to save them as a style:

Step 5: Add content to the placeholders on the wireframe

You’ll want to populate the placeholders in the navigation bar with images of the Little Lemon logo and a user profile icon. Follow these steps to do so:

Step 6: Hero section

The Hero section consists of the Background, Heading, Subheading, Description content, Restaurant Image and Search Bar. To add these elements, complete the following:

Step 7: Menu categories

Create an auto layout button and duplicate it three times. Then, add the following text to label the buttons: “Starters, Mains, Desserts, and Sides”.

Step 8: Menu items section

Here, you need to create a food menu title, a description of the meal with a price, and a photograph.

Tip: Create a component here that you can then reuse for the other menu items.

Conclusion

Well done! You have applied some design fundamentals, added content, and styled your wireframe. You used the Little Lemon brand style guide as your reference and now have a high-fidelity mock-up of the application.